<template>
  <div id="myIncome" :class="{'w375': fun.isPc()}">
    <c-title :hide="false" :text='`${income_name_text}分享`'></c-title>
    <div class="bg-linear-gradient"></div>
    <div class="folder">
      <div class="header" >
        <img style="z-index: 5;" :src="obj.avatar ? obj.avatar : require('../../../assets/images/photo-mr.jpg')">
      </div>
      <div class="folder-bg" :style="`background:linear-gradient(165deg, rgba(${coThemeColor}, 0.2) 0%, rgba(255, 255, 255, 0.1) 50%)`"></div>
      <div class="name" >
        <div class="nickname">{{ obj.nickname }}</div>
        <div class="flex-a-c">
          <div class="member-level">{{ obj.member_level }}</div>
          <div class="member-level">ID:{{ obj.member_id }}</div>
        </div>
      </div>
      <img style="z-index: 5;" :src="imgHost+'/static/images/income_share.png'" class="money-img" />
      <div class="month">
        <div class="tips">本月利润</div>
        <div class="money"><span class="money-symbol">{{ $i18n.t('money') }}</span>{{ obj.month_income }}</div>
      </div>
      <div class="profit-box">
        <div class="item">
          <div class="tips">今日利润</div>
          <div class="money"><span class="money-symbol">{{ $i18n.t('money') }}</span>{{ obj.today_income }}</div>
        </div>
        <div class="item">
          <div class="tips">全部利润</div>
          <div class="money"><span class="money-symbol">{{ $i18n.t('money') }}</span>{{ obj.total_income }}</div>
        </div>
      </div>
      <div class="qr-code" v-if="obj.share_qr">
        <img :src="obj.share_qr">
      </div>
    </div>
  </div>
</template>

<script>
import income from './my_income_controller.js';
export default income;
</script>

<style lang="scss" rel="styleSheet/scss" scoped>
.w375{
  width: 375px;
  position: fixed;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.bg-linear-gradient {
  position: absolute;
  top: 0;
  height: 13.9375rem;
  width: 100%;
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--themeBaseColor)), to(#f5f5f5));
  background-image: -webkit-linear-gradient(var(--themeBaseColor), #f5f5f5);
  background-image: linear-gradient(var(--themeBaseColor), #f5f5f5);
}

.folder {
  width: 21.5625rem;
  height: 26.75rem;
  margin: 3.4375rem auto 1.625rem;
  border-radius: 5px 25px 25px 25px;
  // filter: drop-shadow(0 0 0.75rem grey);
  background: white;
  position: relative;

  // background: linear-gradient( 180deg, rgba(255,255,255,0.6) 0%, #FFFFFF 100%);
}
.folder-bg{
  position: absolute;
  left:1px;
  right: 1px;
  top: -1.6875rem;
  height: 4.5625rem;
  width: 14.6875rem;
  border-radius: 1.5625rem 0 0 0;
  z-index: 2;
}
// .folder::after {
//   content: "";
//     position: absolute;
//     top: -1.65rem;
//     left: .0313rem;
//     width: 100%;
//     height: 6.25rem;
//     // background: linear-gradient(180deg, var(--themeBaseColor) 0%, #FFFFFF 142%);
//     background: linear-gradient(173deg, var(--themeBaseColor) -3%, rgba(255, 255, 255, 0.1) 43%);
//     border-radius: 1.5625rem 0 0 0;
//     clip-path: path("M 0 0 L 262 0 C 300 11, 256 34, 312 28 L 0 111 z");

// }
.folder::before {
  content: '';
  position: absolute;
  top: -1.6875rem;
  left: 0;
  width: 100%;
  height: 6.25rem;
  background: #fff;
  border-radius: 1.5625rem 0 0 0;
  clip-path:path("M 0 0 L 261 0 C 301 6, 263 28, 302 28 L 0 111 z");
}

.profit-box {
  position: absolute;
  top: 9.9688rem;
  left: .9375rem;
  right: .9375rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tips {
  font-weight: 400;
  font-size: .8125rem;
  line-height: 1;
  color: #6E6E79;
}

.qr-code {
  position: absolute;
  top: 16.5rem;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 1.25rem;
  padding: .5rem;
  border: 2px solid #F0F0F1;
  overflow: hidden;

  img {
    display: block;
    width:6.1563rem;
  }
}

.item {
  flex: 1;
  max-width: 9.4688rem;
  background: #F5F5F5;
  padding-top: 1.2813rem;
  border-radius: .75rem;
  padding-left: 1.3125rem;
  padding-bottom: 1.1875rem;
  text-align: left;

}

.money-symbol {
  font-size: .9375rem;
}

.money {
  font-weight: bold;
  font-size: 1.25rem;
  line-height: 1;
  margin-top: .5rem;
  color: #00001C;
  white-space: normal; /* 允许文本换行 */
  word-wrap: break-word; /* 允许长单词换行 */
}

.month {
  position: absolute;
  top: 4.25rem;
  left: .9375rem;
  text-align: left;
  right: .9375rem;
  background: #F5F5F5;
  padding-top: 1.2813rem;
  border-radius: .75rem;
  padding-left: 1.3125rem;
  padding-bottom: 1.1875rem;
  z-index: 5;
}



#myIncome {
  // background-image: url(../../../assets/images/income-bg.png);
  // background-size: 23.4375rem;
  // background-position-y: -2.25rem;

  // .income {
  //   background-color: #fafafa;
  //   width: 18.75rem;
  //   margin: 2.5rem auto;
  //   padding-bottom: 1.25rem;
  //   border-radius: 0.5rem;
  //   box-shadow: 0 0.75rem 0.88rem 0.12rem rgba(51, 51, 51, 0.08);

  h1,
  h2,
  h3,
  h4 {
    color: #333;
  }

  .money-img {
    width: 5.1563rem;
    position: absolute;
    top: -2.1563rem;
    right: .9375rem;
  }

  .member-level {
    padding: .1563rem .2188rem;
    border: 2px solid #D6D6DC;
    color: #6E6E79;
    font-size: .8125rem;
    margin-right: .4063rem;
    line-height: 1;
    text-align: center;
    border-radius: .3125rem;
  }

  .nickname {
    font-weight: bold;
    font-size: 1.125rem;
    line-height: 1;
    color: #00001C;
    text-align: left;
    margin-bottom: .5313rem;
  }

  .header {
    z-index: 5;
    position: absolute;
    top: -1.0313rem;
    left: .9688rem;
    width: 4rem;
    height: 4rem;
    background: #C1B1B1;
    border-radius: 100%;
    overflow: hidden;
    border: 1px solid #fff;

    img {
      width: 100%;
    }
  }

  .name {
    position: absolute;
    left: 5.4375rem;
    top: -0.1875rem;
    z-index: 5;

    h1 {
      font-size: 18px;
      margin-bottom: 0.625rem;
    }

    li {
      font-size: 16px;
      line-height: 1.625rem;
    }

    h2 {
      margin-top: 1rem;
      font-size: 24px;

      span {
        font-size: 14px;
      }
    }
  }



  .code {
    margin: 2.25rem auto 0;
    width: 6.875rem;
    height: 6.875rem;
    background-color: #fff;
    overflow: hidden;

    img {
      width: 100%;
    }
  }

  // }
}
</style>
